@extends('layouts.app')

<?php $primaryNav = 'data'; ?>
<style type="text/css">

.m60 {
    margin-left: 60px !important;
    margin-right: 60px !important;
}
</style>
@section('content')
<div class="row m60">

    <ul class="nav nav-tabs">
        <li class="active">
        <a href="{{ route('data1') }}" class="change">预约日历</a>
        </li>
        <li class=""> 
        <a href="{{ route('data2') }}" class="change">天气</a>
        </li>
    </ul>

    <div class="header">
        </br>
        <a class="btn btn-sm btn-info pull-right" data-toggle="modal" data-target="#modal" href="">立即预约</a>
        <h4>&nbsp;&nbsp;预约日历</h4>
        
    </div> 
    <div id="container" style="width:100%;height:460px;"></div>
    @include('admin.modal.modal-reserve')
</div>

<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-gl/echarts-gl.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts-stat/ecStat.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/dataTool.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/china.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/map/js/world.js"></script>
       <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/extension/bmap.min.js"></script>
       <script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/simplex.js"></script>
       <script type="text/javascript">
var dom = document.getElementById("container");
var myChart = echarts.init(dom);
var app = {};
option = null;

var layouts = [
    [[0, 0]],
    [[-0.25, 0], [0.25, 0]],
    [[0, -0.2], [-0.2, 0.2], [0.2, 0.2]],
    [[-0.25, -0.25], [-0.25, 0.25], [0.25, -0.25], [0.25, 0.25]]
];
var pathes = [
    'M533.504 268.288q33.792-41.984 71.68-75.776 32.768-27.648 74.24-50.176t86.528-19.456q63.488 5.12 105.984 30.208t67.584 63.488 34.304 87.04 6.144 99.84-17.92 97.792-36.864 87.04-48.64 74.752-53.248 61.952q-40.96 41.984-85.504 78.336t-84.992 62.464-73.728 41.472-51.712 15.36q-20.48 1.024-52.224-14.336t-69.632-41.472-79.872-61.952-82.944-75.776q-26.624-25.6-57.344-59.392t-57.856-74.24-46.592-87.552-21.504-100.352 11.264-99.84 39.936-83.456 65.536-61.952 88.064-35.328q24.576-5.12 49.152-1.536t48.128 12.288 45.056 22.016 40.96 27.648q45.056 33.792 86.016 80.896z', 
];
var colors = [
    '#c4332b', '#16B644', '#6862FD', '#FDC763'
];

function getVirtulData(year) {
    year = year || '2017';
    var date = +echarts.number.parseDate(year + '-01-01');
    var end = +echarts.number.parseDate((+year) + '-01-08');
    var dayTime = 3600 * 24 * 1000;
    var data = [];
    for (var time = date; time < end; time += dayTime) {
        var items = [];
        var obj2 = { "1514736000000" : 'xxm', "1514908800000" : 'xxx/xxm' , "1515081600000" : 'xxm/xxm/xxm' , "1515254400000" : 'xxx/xxx/xxm/xxm'};
        var obj3 = { "1514736000000" : '阿发达公司分公司电饭锅', "1514908800000" : '而发爱疯阿芳' , "1515081600000" : '发发大幅度' , "1515254400000" : '打算发发/sgsfg /adda /啊'};
        var eventCount = Math.round(Math.random() * pathes.length);
        // 是否显示图标
        var obj1 = { "1514736000000" : 1, "1514908800000" : 2 , "1515081600000" : 3 , "1515254400000" : 4};
        if (obj1[time] == 1) {
            items.push(0);
        } else if (obj1[time] == 2) {
            for (let index = 0; index < 2; index++) {
                items.push(0); 
            }
        } else if (obj1[time] == 3) {
            for (let index = 0; index < 3; index++) {
                items.push(0); 
            }
        } else if (obj1[time] == 4) {
            for (let index = 0; index < 4; index++) {
                items.push(0); 
            }
        }
        data.push([
            echarts.format.formatTime('yyyy-MM-dd', time),
            items.join('|'),
            obj1[time],
            obj2[time],
            obj3[time],
        ]);
    }
    
    return data;
}

function renderItem(params, api) {
    
    var cellPoint = api.coord(api.value(0));
    
    var cellWidth = params.coordSys.cellWidth;
    var cellHeight = params.coordSys.cellHeight;

    var value = api.value(1);
    var events = value && value.split('|');
    if (isNaN(cellPoint[0]) || isNaN(cellPoint[1])) {
        return;
    }

    var group = {
        type: 'group',
        children: echarts.util.map(layouts[events.length - 1], function (itemLayout, index) {
            return {
                type: 'path',
                shape: {
                    pathData: pathes[events[index]],
                    x: -8,
                    y: -8,
                    width: 16,
                    height: 16
                },
                position: [
                    cellPoint[0] + echarts.number.linearMap(itemLayout[0], [-0.5, 0.5], [-cellWidth / 2, cellWidth / 2]),
                    cellPoint[1] + echarts.number.linearMap(itemLayout[1], [-0.5, 0.5], [-cellHeight / 2 + 20, cellHeight / 2])
                ],
                style: api.style({
                    fill: colors[Math.floor(Math.random() * 4)]
                })
            };
        }) || []
    };

    group.children.push({
        type: 'text',
        style: {
            x: cellPoint[0],
            y: cellPoint[1] - cellHeight / 2 + 15,
            text: echarts.format.formatTime('dd', api.value(0)),
            fill: '#777',
            textFont: api.font({fontSize: 14})
        }
    });

    return group;
}

option = {
    tooltip: {
    },
    calendar: [{
        left: 'center',
        top: 'middle',
        cellSize: [70, 70],
        yearLabel: {show: false},
        orient: 'vertical',
        dayLabel: {
            firstDay: 1,
            nameMap: 'cn'
        },
        monthLabel: {
            show: false
        },
        range: '2018-01'
    }],
    series: [{
        type: 'custom',
        coordinateSystem: 'calendar',
        renderItem: renderItem,
        dimensions: ['日期', {type:'ordinal'}, '人数', '姓名', '简介'],
        data: getVirtulData(2018)
    }]
};
;
if (option && typeof option === "object") {
    myChart.setOption(option, true);
}
</script>


@endsection
